<!--
 * @Author: YuA
 * @Date: 2021-08-04 22:50:30
 * @LastEditTime: 2021-08-18 20:56:47
 * @FilePath: \index\src\views\home\childComps\FeatureView.vue
-->
<template>
  <div class="recommend">
    <slides-2
      :imgs="recommends"
      :imgClass="homePageImg"
      :textClass="pageText"
      :swiperOption="swiperOption"
    />
  </div>
</template>

<script>
import Slides2 from "components/common/swiper/Slides2";
export default {
  name: "RecommendView",
  data() {
    return {
      pageText: "page-text",
      homePageImg: "home-page-img",
      swiperOption: {
        notNextTick: true,
        //循环
        loop: false,
        //设定初始化时slide的索引
        initialSlide: 0,
        //视图显示个数
        slidesPerView: 5.4,
        //自动播放
        autoplay: false,
        // 设置轮播
        effect: "flip",
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        paginationClickable: true,
        //小手掌抓取滑动
        grabCursor: true,
        //个体类名替换
        slideClass: "my-slide",
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function() {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        }
      }
    };
  },
  props: {
    recommends: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    Slides2
  }
};
</script>

<style lang="scss">
.recommend {
  display: flex;
  min-height: 6em;
  margin: 5px 0 0;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid red;
}
.recommend-item {
  flex: 1;
  img {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
  }
}

.home-page-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  margin-bottom: 5px;
  border-radius: 50%;
  background-color: rgba(218, 161, 161, 0.5);
}

.page-text {
  color: #fff;
}
</style>
